<template>
  <div class="box">
    <h1>组件间通信2: vue自定义事件</h1>
    <!-- 
    区分原生事件监听与自定义事件监听(从3点分析)
      1. 绑定监听
        - 原生: 
            原生标签: @事件名="回调函数"
            组件标签: @事件名.native="回调函数"
            注意: 事件名只能是少量的几个特定名称
        - 自定义: 
            组件标签: @事件名="回调函数"
            组件对象.$on(事件名, 回调函数)
            注意: 只能在组件标签上绑定, 事件名可以是任意名称
        注意:
            回调函数通过第一个函数来接收分发事件时指定的事件对象(事件数据)
      2. 触发(分发)事件
        - 原生: 
            用户在对应标签区域上做相应操作时, 浏览器自动分发, 并指定包含事件相关数据的事件对象
        - 自定义: 
            通过组件的$emit(事件名, 数据)来分发
      3. 事件对象
        - 原生: 
            包含事件相关信息的对象(target / offsetX / offsetY / keyCode等), 浏览器在分发前内部指定
        - 自定义: 
            我们在通过$emit分发时第2个参数指定任意类型数据(也可以不指定)
        - 注意:
          在@绑定监听时, $event就是事件对象
          原生的是对象, 但自定义的可以是任意类型, ==> 平时交流时一般还是说事件对象
          本质就是事件相关数据
    -->


    <h2>原生事件监听</h2>
    <button @click="test1">原生标签原生DOM事件监听</button>
    <button @click="test1($event)">原生标签原生DOM事件监听2</button>

    <br>
    <br>
    <Event1 @click.native="test2"/>

    <br>
    <br>
    <h2>自定义事件监听</h2>
    <p>count: {{count}}</p>
    <event2 @click="test3" @xxx="test4($event)"/>


    <br>
    <br>
    <button @click="$bus.$emit('updateMsg', '--')">测试总线分发事件</button>
  </div>
</template>

<script type="text/ecmascript-6">
  import Event1 from './Event1.vue'
  import Event2 from './Event2.vue'

  export default {
    name: 'EventTest',

    data () {
      return {
        count: 0
      }
    },

    components: {
      Event1,
      Event2,
    },

    methods: {
      updateCount (num) {
        this.count += num
      },

      test1 (event) {
        alert(event.target.innerHTML)
      },

      test2 (event) {
        alert(event.target.tagName)
      },

      test3 (num) {
        alert(num)
        this.updateCount(num)
      },

      test4 (num) {
        alert('--' + num)
        this.updateCount(num)
      }
    }
  }
</script>
